<template>
  <div class="_wz_vehicleRelevance">
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">货运挂车关联记录</p>
      <wzTbale ref="wzTbale1" :tableData="tableData1"></wzTbale>
    </Card>
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">从业人员关联记录</p>
      <wzTbale ref="wzTbale2" :tableData="tableData2"></wzTbale>
    </Card>
    <Spin size="large" fix v-if="spinShow"></Spin>


  </div>
</template>
<script>
  import wzTbale from "../../../components/table/table";

  export default {
    components: {
      wzTbale,//列表
    },
    props: ['selectData'],//接收来自父组件的数据
    data() {
      return {
        spinShow:false,//本页加载
        //车辆数据
        vehicleData: {},

        tableData1: {
          url: this.apiUrl.webApi + "/core/bind/relation/list",//请求地址
          method: 'post',//请求方式
          where: {vehicleUuid: this.selectData.uuid, bindType: 3},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'trailerPlateNo'},
            {title: '车架号', minWidth: 190, key: 'trailerFrameNo'},
            {title: '车主业户', minWidth: 120, key: 'trailerOwnerName'},
            {title: '车主联系电话', minWidth: 140, key: 'trailerOwnerPhone'},
            {title: '车辆类型', minWidth: 150, key: 'trailerType'},
            {title: '运输企业', minWidth: 260, key: 'trailerDeptName'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.unbundleTrailer(params.row)
                    }
                  }
                }, "解绑");
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
        tableData2: {
          url: this.apiUrl.webApi + "/core/bind/relation/list",//请求地址
          method: 'post',//请求方式
          where: {vehicleUuid: this.selectData.uuid, bindType: 2},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '人员名称', minWidth: 120, key: 'driverName'},
            {title: '人员性别', minWidth: 120, key: 'driverGender'},
            {title: '从业类型', minWidth: 120, key: 'driverTypeName'},
            {title: '身份证号', minWidth: 160, key: 'driverIdentifyNum'},
            {title: '联系电话', minWidth: 120, key: 'driverPhone'},
            {title: '运输企业', minWidth: 260, key: 'driverDeptName'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.unbundleDriver(params.row)
                    }
                  }
                }, "解绑");
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;

      //车辆详情
      that.axios.post(that.apiUrl.coreVehicleCoreVehicleInfo, {uuid: that.selectData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.vehicleData = res.data.data;//表单
        }
      }).catch(err => {
        console.log("失败", err)
      })


    },
    methods: {//执行的方法


      unbundleTrailer(data) {
        //挂车解绑
        let that = this;
        that.$Modal.confirm({
          title: '解绑提醒',
          content: '确定要解绑选中的记录？',
          onOk: () => {
            that.spinShow = true;
            that.axios.post(that.apiUrl.webApi + "/management/vehicle/binding/unbind/trailerVehicle", {uuid: data.uuid}).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success("解绑成功");
                that.$refs.wzTbale1.tableLoadData();
              }
            }).catch(err => {
              console.log('失败', err);
            })
          },
          onCancel: () => {
            //点击取消
          }
        });
      },
      unbundleDriver(data) {
        //人员解绑
        let that = this;
        that.$Modal.confirm({
          title: '解绑提醒',
          content: '确定要解绑选中的记录？',
          onOk: () => {
            that.spinShow = true;
            that.axios.post(that.apiUrl.webApi + "/management/vehicle/binding/unbind/driverVehicle", {uuid: data.uuid}).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success("解绑成功");
                that.$refs.wzTbale2.tableLoadData();
              }
            }).catch(err => {
              console.log('失败', err);
            })
          },
          onCancel: () => {
            //点击取消
          }
        });
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_vehicleRelevance {
    .demo-upload-list {
      margin: 5px 0;
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }

  .subCol > ul > li {
    margin: 0 -18px;
    list-style: none;
    padding: 9px 18px;
    min-height: 48px;
    border-bottom: 1px solid #e8eaec;
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
  }

  .subCol > ul > li:last-child {
    border-bottom: none
  }
</style>
